// 数据概览
// 1 显示班级概况
// 2 薪资折线图
// 3 籍贯-柱形图
// 4 成绩 柱状图
// 5 地图路径

// 班级概况
function getStudentOverview() {
    {
        // 获取接口
        axios.get('/student/overview').then((result) => {
            // console.log(result);
            if (result.data.code === 0) {
                // 获取里面的数据
                // 通过结构的方式
                const { avgAge, avgSalary, proportion, total } = result.data.data;

                document.querySelector('.avgAge').innerText = avgAge;
                document.querySelector('.avgSalary').innerText = avgSalary;
                document.querySelector('.proportion').innerText = proportion;
                document.querySelector('.total').innerText = total;

            }
        })
    }
};

// 调用 班级概况 函数
getStudentOverview()


// 获取全部学员信息
function getStudentList() {
    axios.get('/student/list').then((result) => {
        const list = result.data.data;

        // 接收数组 渲染折线图
        salaryLine(list);
        // 籍贯饼图
        homeTown(list);
    });
}

// 薪资折线图
function salaryLine(list) {
    // 拆分 期望薪资数组
    const salarys = list.map((v) => v.salary);
    // 拆分 实际薪资数组
    const truesalarys = list.map((v) => v.truesalary);

    // 拆分 名单数组
    const names = list.map((v) => v.name);

    // 变成 图表显示出来

    // 1 获取有宽度和高度的div 元素 传入 echarts 实例化
    const myChart = echarts.init(document.querySelector('.line'));
    // 2 添加一些 配置
    const option = {
        // 设置线条颜色
        color: ['#ee6666', '#5470c6'],
        title: {
            text: '薪资 Salary',
        },
        tooltip: {
            trigger: 'axis',
        },
        legend: {},
        // 工具箱
        toolbox: {
            show: false,
            feature: {
                dataZoom: {
                    yAxisIndex: 'none',
                },
                dataView: { readOnly: false },
                magicType: { type: ['line', 'bar'] },
                restore: {},
                saveAsImage: {},
            },

        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: names, // 同学名单
        },
        yAxis: {
            type: 'value',
        },
        // 滑块
        dataZoom: [
            {
                type: 'inside',
                start: 0,
                end: 10,
            },

            {
                start: 0,
                end: 10, // 总宽度100  10 十分之一 ，  这个设置要上 上面的设置 保持一致
            },

        ],
        series: [
            {
                name: '期望薪资',
                type: 'line',
                smooth: true, // 线条平滑
                symbol: 'circle', // 实心
                data: salarys, // 真实的数据
            },

            {
                name: '实际薪资',
                type: 'line',
                symbol: 'circle', // 实心

                smooth: true, // 线条平滑
                data: truesalarys, // 真实数据
            },

        ],
    };


    // 3 echart实例开始使用配置
    myChart.setOption(option);
}

// 籍贯饼图
function homeTown(list) {
    /* 
    1 定义一个空数组 表示 处理后的数据    
      [
      {value:5,name:"广东省"},
      {value:15,name:"贵州省"},
      ]
  
    2 对 list做遍历
      1 判断一下 当前被遍历的元素 是否存在于 新数组中
      2 如果不存在 新数组push一个新的对象  {value:1,name:"广东"}
      3 如果存在  找到数组中的元素，给它value值 +1 
     */

    const newList = [];
    list.forEach((v) => {
        // v 就是 list中元素    vv.name
        // vv 自己构造的 新数组中的元素
        const index = newList.findIndex((vv) => vv.name === v.province);
        // 如果找到 index不等于-1
        if (index === -1) {
            newList.push({ value: 1, name: v.province });
        } else {
            newList[index].value++;
        }
    });

    const myChart = echarts.init(document.querySelector('.pie'));
    const option = {
        title: {
            text: '籍贯 HomeTown',
        },
        series: [
            {
                name: '籍贯 HomeTown',
                type: 'pie',
                radius: [50, 150],
                center: ['50%', '50%'],
                roseType: 'area',
                itemStyle: {
                    borderRadius: 8,
                },
                data: newList, // 处理后的数组
            },
        ],
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
}

// 按照次数来 获取成绩 数据
// /score/batch?batch=2
function getScoreBatch(batch) {
    axios.get('/score/batch', { params: { batch } }).then((result) => {
        // console.log(result);
        if (result.data.code === 0) {
            // avgScore : 平均分
            // group ： 组名
            // gt60 ： 60-80 之间的人数
            // gt80 : 80  以上的人数
            // lt60 ： 小于  60分 人数
            const { avgScore, group, gt60, gt80, lt60 } = result.data.data;
            // console.log(avgScore, group, gt60, gt80, lt60);

            // 基于准备好的dom，初始化echarts实例
            const myChart = echarts.init(document.querySelector('.barChart'));

            // 指定图表的配置项和数据
            const option = {
                // 设置图表拉伸
                grid: {
                    top: 30, // 设置图表的顶部和容器的距离 -  设置拉伸
                    bottom: 20, // 设置图表的底部和容器的距离 -  设置拉伸
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#999'
                        }
                    }
                },

                legend: {
                    data: [
                        '平均分',
                        '低于60分人数',
                        '60分~80分的人数',
                        '高于80分的人数',
                    ]
                },
                xAxis: [
                    {
                        type: 'category',
                        data: group,// ---=组名
                        axisPointer: {
                            type: 'shadow'
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',

                        min: 0,
                        max: 100,
                        interval: 10,// 间隔
                        axisLabel: {
                            formatter: '{value} 分'
                        }
                    },
                    {
                        type: 'value',
                        min: 0,
                        max: 10,
                        interval: 1,
                        axisLabel: {
                            formatter: '{value} 人'
                        }
                    }
                ],
                series: [
                    {
                        name: '平均分',// 这里的名字和表图头部的名字要一至
                        type: 'bar',// bar 是 柱形
                        tooltip: {
                            valueFormatter: function (value) {
                                return value + ' 分';
                            }
                        },
                        data: avgScore
                    },
                    {
                        name: '低于60分人数',
                        type: 'bar',
                        yAxisIndex: 1,// 参考右侧的y轴
                        tooltip: {
                            valueFormatter: function (value) {
                                return value + ' 分';
                            }
                        },
                        data: lt60
                    },
                    {
                        name: '60分~80分的人数',
                        type: 'bar',
                        yAxisIndex: 1,// 参考右侧的y轴
                        tooltip: {
                            valueFormatter: function (value) {
                                return value + ' °C';
                            }
                        },
                        data: gt60
                    },
                    {
                        name: '高于80分的人数',
                        type: 'bar',
                        yAxisIndex: 1,
                        tooltip: {
                            valueFormatter: function (value) {
                                return value + ' °C';
                            }
                        },
                        data: gt80
                    }

                ]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);

        }
    });
}


const toggleBatchBtn = document.querySelector('#toggleBatchBtn'); // 显示成绩的小菜单
const batchUl = document.querySelector('#batch'); // 显示成绩的小菜单

getStudentList();

getScoreBatch(1)

// 添加点击事件 控制 成绩菜单 切换显示 
toggleBatchBtn.addEventListener('click', function (e) {
    batchUl.classList.toggle('show');
});

// 点击第几次成绩 
batchUl.addEventListener('click', function (e) {
    const index = e.target.dataset.index
    // 根据第几次来获取 对应的成绩
    getScoreBatch(index);
});


// 基于准备好的dom，初始化echarts实例
const myChart = echarts.init(document.querySelector('.map'));

const points = [
    { value: [118.8062, 31.9208], itemStyle: { color: '#4ab2e5' } }// 圆点颜色
    , { value: [127.9688, 45.368], itemStyle: { color: '#4fb6d2' } }
    , { value: [110.3467, 41.4899], itemStyle: { color: '#52b9c7' } }
    , { value: [125.8154, 44.2584], itemStyle: { color: '#5abead' } }
    , { value: [116.4551, 40.2539], itemStyle: { color: '#f34e2b' } }
    , { value: [123.1238, 42.1216], itemStyle: { color: '#f56321' } }
    , { value: [114.4995, 38.1006], itemStyle: { color: '#f56f1c' } }
    , { value: [117.4219, 39.4189], itemStyle: { color: '#f58414' } }
    , { value: [112.3352, 37.9413], itemStyle: { color: '#f58f0e' } }
    , { value: [109.1162, 34.2004], itemStyle: { color: '#f5a305' } }
    , { value: [103.5901, 36.3043], itemStyle: { color: '#e7ab0b' } }
    , { value: [106.3586, 38.1775], itemStyle: { color: '#dfae10' } }
    , { value: [101.4038, 36.8207], itemStyle: { color: '#d5b314' } }
    , { value: [103.9526, 30.7617], itemStyle: { color: '#c1bb1f' } }
    , { value: [108.384366, 30.439702], itemStyle: { color: '#b9be23' } }
    , { value: [113.0823, 28.2568], itemStyle: { color: '#a6c62c' } }
    , { value: [102.9199, 25.46639], itemStyle: { color: '#96cc34' } }
    , { value: [84.9023, 41.748], itemStyle: { color: '#96cc34' } }
    , { value: [88.7695, 31.6846], itemStyle: { color: '#96cc34' } }
    , { value: [96.2402, 35.4199], itemStyle: { color: '#96cc34' } }//======
    , { value: [109.9512, 19.2041], itemStyle: { color: '#96cc34' } }
    , { value: [121.0254, 23.5986], itemStyle: { color: '#96cc34' } }
    , { value: [108.2813, 23.6426], itemStyle: { color: '#96cc34' } }

    , { value: [111.5332, 27.3779] }

]

echarts.registerMap('china', mapData);// mapData q 请求回来的数据 尽量
const option = {
    backgroundColor: '#fff',
    title: {
        top: 20,
        text: '来湖南路径',
        subtext: '',
        x: 'left',
        textStyle: {
            color: 'black'
        }
    },


    tooltip: {
        trigger: 'item',
        formatter: function (params) {
            console.log(params)
            return params.name + ' : ' + params.value[2];
        }
    },

    geo: {
        map: 'china',
        aspectScale: 1, //长宽比
        zoom: 1.2,
        roam: false,
        itemStyle: {
            normal: {
                areaColor: {
                    type: 'radial',
                    x: 0.5,
                    y: 0.5,
                    r: 0.8,
                    colorStops: [{
                        offset: 0,
                        color: '#09132c' // 0% 处的颜色
                    }, {
                        offset: 1,
                        color: '#274d68'  // 100% 处的颜色
                    }],
                    globalCoord: true // 缺省为 false
                },
                shadowColor: 'rgb(58,115,192)',
                shadowOffsetX: 10,
                shadowOffsetY: 11
            },
            emphasis: {
                areaColor: '#2AB8FF',
                borderWidth: 0,
                color: 'green',
                label: {
                    show: false
                }
            }
        },
        regions: [{
            name: '南海诸岛',
            itemStyle: {
                areaColor: 'rgba(0, 10, 52, 1)',

                borderColor: 'rgba(0, 10, 52, 1)',
                normal: {
                    opacity: 0,
                    label: {
                        show: false,
                        color: "#009cc9",
                    }
                }
            },


        }],
    },
    series: [{
        type: 'map',
        roam: false,
        label: {
            normal: {
                show: true,
                textStyle: {
                    color: '#1DE9B6'
                }
            },
            emphasis: {
                textStyle: {
                    color: 'rgb(183,185,14)'
                }
            }
        },

        itemStyle: {
            normal: {
                borderColor: 'rgb(147, 235, 248)',
                borderWidth: 1,
                areaColor: {
                    type: 'radial',
                    x: 0.5,
                    y: 0.5,
                    r: 0.8,
                    colorStops: [{
                        offset: 0,
                        color: '#09132c' // 0% 处的颜色
                    }, {
                        offset: 1,
                        color: '#274d68'  // 100% 处的颜色
                    }],
                    globalCoord: true // 缺省为 false
                },
            },
            emphasis: {
                areaColor: 'rgb(46,229,206)',
                //    shadowColor: 'rgb(12,25,50)',
                borderWidth: 0.1
            }
        },
        zoom: 1.1,
        //     roam: false,
        map: 'china' //使用
        // data: this.difficultData //热力图数据   不同区域 不同的底色
    }, {
        type: 'effectScatter',
        coordinateSystem: 'geo',
        showEffectOn: 'render',
        zlevel: 1,
        rippleEffect: {
            period: 15,
            scale: 4,
            brushType: 'fill'
        },
        hoverAnimation: true,
        label: {
            normal: {
                formatter: '{b}',
                position: 'right',
                offset: [15, 0],
                color: '#1DE9B6',
                show: true
            },
        },
        itemStyle: {
            normal: {
                color: '#1DE9B6'/* function (value){ //随机颜色
                return "#"+("00000"+((Math.random()*16777215+0.5)>>0).toString(16)).slice(-6);
                }*/,
                shadowBlur: 10,
                shadowColor: '#333'
            }
        },
        symbolSize: 12,
        data: points
    }, //地图线的动画效果
    {
        type: 'lines',
        zlevel: 2,
        effect: {
            show: true,
            period: 4, //箭头指向速度，值越小速度越快
            trailLength: 0.4, //特效尾迹长度[0,1]值越大，尾迹越长重
            symbol: 'arrow', //箭头图标
            symbolSize: 7, //图标大小
        },
        lineStyle: {
            normal: {
                color: '#1DE9B6'
                /* function (value){ //随机颜色
                
                ['#f21347','#f3243e','#f33736','#f34131','#f34e2b',
                '#f56321','#f56f1c','#f58414','#f58f0e','#f5a305',
                '#e7ab0b','#dfae10','#d5b314','#c1bb1f','#b9be23',
                '#a6c62c','#96cc34','#89d23b','#7ed741','#77d64c',
                '#71d162','#6bcc75','#65c78b','#5fc2a0','#5abead',
                '#52b9c7','#4fb6d2','#4ab2e5']
                return "#"+("00000"+((Math.random()*16777215+0.5)>>0).toString(16)).slice(-6);
                }*/,
                width: 1, //线条宽度
                opacity: 0.1, //尾迹线条透明度
                curveness: .3 //尾迹线条曲直度
            }
        },
        data: [
            { coords: [[118.8062, 31.9208], [111.5332, 27.3779]], lineStyle: { color: '#4ab2e5' } }// 箭头颜色
            , { coords: [[127.9688, 45.368], [111.5332, 27.3779]], lineStyle: { color: '#4fb6d2' } }
            , { coords: [[110.3467, 41.4899], [111.5332, 27.3779]], lineStyle: { color: '#52b9c7' } }
            , { coords: [[125.8154, 44.2584], [111.5332, 27.3779]], lineStyle: { color: '#5abead' } }
            , { coords: [[116.4551, 40.2539], [111.5332, 27.3779]], lineStyle: { color: '#f34e2b' } }
            , { coords: [[123.1238, 42.1216], [111.5332, 27.3779]], lineStyle: { color: '#f56321' } }
            , { coords: [[114.4995, 38.1006], [111.5332, 27.3779]], lineStyle: { color: '#f56f1c' } }
            , { coords: [[117.4219, 39.4189], [111.5332, 27.3779]], lineStyle: { color: '#f58414' } }
            , { coords: [[112.3352, 37.9413], [111.5332, 27.3779]], lineStyle: { color: '#f58f0e' } }
            , { coords: [[109.1162, 34.2004], [111.5332, 27.3779]], lineStyle: { color: '#f5a305' } }
            , { coords: [[103.5901, 36.3043], [111.5332, 27.3779]], lineStyle: { color: '#e7ab0b' } }
            , { coords: [[106.3586, 38.1775], [111.5332, 27.3779]], lineStyle: { color: '#dfae10' } }
            , { coords: [[101.4038, 36.8207], [111.5332, 27.3779]], lineStyle: { color: '#d5b314' } }
            , { coords: [[103.9526, 30.7617], [111.5332, 27.3779]], lineStyle: { color: '#c1bb1f' } }
            , { coords: [[108.384366, 30.439702], [111.5332, 27.3779]], lineStyle: { color: '#b9be23' } }
            , { coords: [[113.0823, 28.2568], [111.5332, 27.3779]], lineStyle: { color: '#a6c62c' } }
            , { coords: [[102.9199, 25.46639], [111.5332, 27.3779]], lineStyle: { color: '#96cc34' } }
            , { coords: [[84.9023, 41.748], [111.5332, 27.3779]], lineStyle: { color: '#96cc34' } }
            , { coords: [[88.7695, 31.6846], [111.5332, 27.3779]], lineStyle: { color: '#96cc34' } }
            , { coords: [[109.9512, 19.2041], [111.5332, 27.3779]], lineStyle: { color: '#96cc34' } }
            , { coords: [[121.0254, 23.5986], [111.5332, 27.3779]], lineStyle: { color: '#96cc34' } }
            , { coords: [[108.2813, 23.6426], [111.5332, 27.3779]], lineStyle: { color: '#96cc34' } }
            , { coords: [[96.2402, 35.4199], [111.5332, 27.3779]], lineStyle: { color: '#96cc34' } }
        ]
    }

    ]
};
myChart.setOption(option, true);